<template>
  <view class="authentication-page">
    <!-- 使用导航栏组件 -->
    <navbar-component 
      title="骑手认证"
      @goBack="goBack"
    ></navbar-component>
    
    <!-- 页面内容 -->
    <view class="authentication-content">
      
      <!-- 个人信息表单 -->
      <view class="form-container">
        <view class="form-item" @click="editName">
          <text class="form-label">姓名</text>
          <view class="form-value-container">
            <text class="form-value">{{ formData.name || '请输入姓名' }}</text>
            <!-- <text class="arrow">></text> -->
          </view>
        </view>
        
        <view class="form-item" @click="editPhone">
          <text class="form-label">手机号</text>
          <view class="form-value-container">
            <text class="form-value">{{ formData.phone || '请输入手机号' }}</text>
            <!-- <text class="arrow">></text> -->
          </view>
        </view>
        
        <view class="form-item" @click="showAreaPicker">
          <text class="form-label">所属区域</text>
          <view class="form-value-container">
            <text class="form-value2">{{ formData.area }}</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="form-item" @click="showGenderPicker">
          <text class="form-label">性别选择</text>
          <view class="form-value-container">
            <text class="form-value2">{{ formData.gender }}</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 协议勾选区域 -->
      <view class="agreement-container">
        <view class="agreement-item" @click="toggleAgreement">
          <view class="checkbox" :class="{ 'checkbox-checked': isAgreementChecked }">
            <text v-if="isAgreementChecked" class="checkbox-icon">✓</text>
          </view>
          <text class="agreement-text">
            我已阅读并同意
            <text class="agreement-link" @click.stop="viewAgreement">《平台协议》</text>
          </text>
        </view>
      </view>
      
      <!-- 提交申请按钮 -->
      <view class="submit-button">
        <button 
          class="submit-btn" 
          :class="{ 'submit-btn-disabled': !isAgreementChecked }"
          :disabled="!isAgreementChecked"
          @click="submitApplication"
        >
          提交申请
        </button>
      </view>
    </view>
    
    <!-- 使用封装的picker组件 -->
    <picker-component
      :visible="showArea"
      :options="areaOptions"
      :default-index="selectedAreaIndex"
      @cancel="hideAreaPicker"
      @confirm="confirmArea"
    ></picker-component>
    
    <picker-component
      :visible="showGender"
      :options="genderOptions"
      :default-index="selectedGenderIndex"
      @cancel="hideGenderPicker"
      @confirm="confirmGender"
    ></picker-component>
    
    <!-- 自定义弹窗 -->
    <view v-if="showCustomModal" class="modal-overlay" @click="closeModal">
      <view class="modal-container" @click.stop>
        <view class="modal-header">
          <text class="modal-title">{{ modalTitle }}</text>
        </view>
        <view class="modal-content">
          <input 
            class="modal-input"
            v-model="modalInputValue"
            :placeholder="modalPlaceholder"
            :focus="showCustomModal"
            @confirm="confirmModal"
          />
        </view>
        <view class="modal-footer">
          <button class="modal-btn modal-btn-cancel" @click="closeModal">取消</button>
          <button class="modal-btn modal-btn-confirm" @click="confirmModal">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';
import NavbarComponent from '../../zujian/navbar.vue';
import PickerComponent from '../../zujian/picker.vue';

export default {
  name: 'Authentication',
  components: {
    NavbarComponent,
    PickerComponent
  },
  setup() {
    // 响应式数据
    const formData = ref({
      name: '',
      phone: '',
      area: '振涛/保理/科技-校园贴吧',
      gender: '男'
    });
    
    const showArea = ref(false);
    const showGender = ref(false);
    const selectedAreaIndex = ref(1); // 默认选中第二个选项
    const selectedGenderIndex = ref(0); // 默认选中第一个选项
    const isAgreementChecked = ref(false); // 协议勾选状态
    
    const areaOptions = ref([
      '哈密市五堡镇外卖',
      '振涛/保理/科技-校园贴吧',
      '湖南石油化工职业技术学院',
      '华北理工大学',
      '新疆科技职业技术学院',
    ]);
    
    const genderOptions = ref(['男', '女']);
    
    // 自定义弹窗相关数据
    const showCustomModal = ref(false);
    const modalTitle = ref('');
    const modalInputValue = ref('');
    const modalPlaceholder = ref('');
    const currentEditType = ref(''); // 当前编辑类型：'name' 或 'phone'

    // 方法
    const goBack = () => {
      uni.navigateBack();
    };

    const editName = () => {
      modalTitle.value = '姓名';
      modalInputValue.value = formData.value.name;
      modalPlaceholder.value = '请输入姓名';
      currentEditType.value = 'name';
      showCustomModal.value = true;
    };

    const editPhone = () => {
      modalTitle.value = '手机号';
      modalInputValue.value = formData.value.phone;
      modalPlaceholder.value = '请输入手机号';
      currentEditType.value = 'phone';
      showCustomModal.value = true;
    };

    const showAreaPicker = () => {
      showArea.value = true;
    };

    const hideAreaPicker = () => {
      showArea.value = false;
    };

    const confirmArea = (data) => {
      formData.value.area = data.value;
      selectedAreaIndex.value = data.index;
      hideAreaPicker();
    };

    const showGenderPicker = () => {
      showGender.value = true;
    };

    const hideGenderPicker = () => {
      showGender.value = false;
    };

    const confirmGender = (data) => {
      formData.value.gender = data.value;
      selectedGenderIndex.value = data.index;
      hideGenderPicker();
    };

    const toggleAgreement = () => {
      isAgreementChecked.value = !isAgreementChecked.value;
    };

    const viewAgreement = () => {
      uni.showModal({
        title: '平台协议',
        content: '这里是平台协议的详细内容...',
        showCancel: false,
        confirmText: '我知道了'
      });
    };

    const submitApplication = () => {
      // 检查表单是否完整
      if (!formData.value.name || !formData.value.phone) {
        uni.showModal({
          title: '提示',
          content: '请完善信息',
          showCancel: false,
          confirmText: '我知道了'
        });
        return;
      }
      
      if (!isAgreementChecked.value) {
        uni.showToast({
          title: '请先同意平台协议',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '提交申请',
        content: '确定要提交骑手认证申请吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '申请提交成功',
              icon: 'success'
            });
            // 这里可以添加提交到服务器的逻辑
          }
        }
      });
    };

    const closeModal = () => {
      showCustomModal.value = false;
      modalInputValue.value = '';
    };

    const confirmModal = () => {
      if (modalInputValue.value.trim()) {
        if (currentEditType.value === 'name') {
          formData.value.name = modalInputValue.value.trim();
        } else if (currentEditType.value === 'phone') {
          // 简单的手机号验证
          const phoneRegex = /^1[3-9]\d{9}$/;
          if (!phoneRegex.test(modalInputValue.value.trim())) {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none'
            });
            return;
          }
          formData.value.phone = modalInputValue.value.trim();
        }
        closeModal();
      } else {
        uni.showToast({
          title: '请输入内容',
          icon: 'none'
        });
      }
    };

    return {
      // 响应式数据
      formData,
      showArea,
      showGender,
      selectedAreaIndex,
      selectedGenderIndex,
      isAgreementChecked,
      areaOptions,
      genderOptions,
      showCustomModal,
      modalTitle,
      modalInputValue,
      modalPlaceholder,
      currentEditType,
      
      // 方法
      goBack,
      editName,
      editPhone,
      showAreaPicker,
      hideAreaPicker,
      confirmArea,
      showGenderPicker,
      hideGenderPicker,
      confirmGender,
      toggleAgreement,
      viewAgreement,
      submitApplication,
      closeModal,
      confirmModal
    };
  }
}
</script>

<style lang="scss" scoped>
.authentication-page {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.authentication-content {
  padding: 10px 0px;
}

.form-container {
  background-color: #fff;
  margin: 10px 15px;
  border-radius: 8px;
  overflow: hidden;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f8f8f8;
  }
}

.form-label {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.form-value {
  margin-right: 18px;
  font-size: 16px;
  color: #666;
}
.form-value2 {
  font-size: 16px;
  color: #666;
}
.form-value-container {
  display: flex;
  align-items: center;
}

.arrow {
  margin-left: 8px;
  color: #999;
  font-size: 16px;
}

/* 协议勾选区域 */
.agreement-container {
  margin: 20px 15px;
}

.agreement-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.checkbox-checked {
  background-color: #ff4444;
  border-color: #ff4444;
}

.checkbox-icon {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.agreement-text {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.agreement-link {
  color: #ff4444;
  text-decoration: underline;
}

/* 提交按钮区域 */
.submit-button {
  margin: 30px 15px;
}

.submit-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.4);
    
    &::before {
      left: 100%;
    }
  }
  
  &:not(:disabled):hover {
    background: linear-gradient(135deg, #ff3333 0%, #ff5555 100%);
    box-shadow: 0 6px 16px rgba(255, 68, 68, 0.4);
  }
}

.submit-btn-disabled {
  background: linear-gradient(135deg, #cccccc 0%, #dddddd 100%) !important;
  color: #999 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  cursor: not-allowed;
  
  &:active {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  &::before {
    display: none !important;
  }
}

/* 自定义弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-container {
  width: 85%;
  max-width: 320px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 24px 20px 16px;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
}

.modal-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.modal-input {
  width: 100%;
  height: 48px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
  background-color: #fafbfc;
  transition: all 0.3s ease;
  
  &:focus {
    border-color: #ff4444;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1);
  }
  
  &::placeholder {
    color: #999;
    font-size: 14px;
  }
}

.modal-footer {
  display: flex;
  padding: 0;
  border-top: 1px solid #f0f0f0;
}

.modal-btn {
  flex: 1;
  height: 50px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  &:active::before {
    left: 100%;
  }
}

.modal-btn-cancel {
  background-color: #f5f5f5;
  color: #666;
  border-right: 1px solid #f0f0f0;
  
  &:active {
    background-color: #e8e8e8;
  }
}

.modal-btn-confirm {
  background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
  
  &:active {
    background: linear-gradient(135deg, #ff3333 0%, #ff5555 100%);
    transform: translateY(1px);
  }
}
</style>